<template>
  <div class="container">
    <div class="title">这是插件的后台</div>
    <div class="start" @click="goToExtensionDoc">
      Getting Chrome Extension Start &nbsp;
      <div class="arrow"></div>
    </div>
    <div @click="getlist">获取搜索历史</div>
    <div>
      {{ list }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const chromeExtensionUrl = "https://developer.chrome.com/docs/extensions/";

const goToExtensionDoc = () => {
  window.open(chromeExtensionUrl);
};

const list = ref(null);
const getlist = () => {
  // 查询历史记录
  chrome.history.search({ text: "", maxResults: 10 }, function (results) {
    console.log("History records:", results);
    list.value = results;
  });
};
</script>

<style lang="less" scoped>
@import "../style/options.less";
</style>
